<template>
	<!-- 		<view class="blank">
			<button class="back" @click="return_page"></button>
		</view>
		<view class="back_btn">
		</view> -->
	<view class="custom-nav">
		<view class="search-container" @click="return_page">
			<image src="../../static/icon_back_white.png" class="search-icon"></image>
		</view>
		<view class="custom-title">惠商城</view>
	</view>

	<view class="search_">
		<input type="text" placeholder="请搜索你想发现的宝贝"  v-model="item_name">
		<button class="toSearch" @click="gotoSearch">搜索</button>
	</view>
	<view class="search_history">
		<view class="history_line">
			<text>历史数据</text>
			<button class="del_history" @click="del_history"></button>
		</view>
	</view>
	<view class="history">
		<button class="item_1" v-for="(item,index) in history_data" :key="index" @click="add_item(item)">
			{{item}}
		</button>
	</view>
	<view class="hot_lines">
		<text>当前热门</text>
	</view>
	<view class="hot_items">
		<button class="item_2" v-for="(item,index) in data1" :key="index" @click="add_item(item.name)">
			{{item.name}}
		</button>
	</view>
</template>
<script>
	import {
		hisearch
	} from "@/api/request.js"

	export default {
		data() {
			return {
				datas: [],
				data1: [],
				isdata: true,
				item_name: "",
				history_data: []
			}
		},
		
		methods: {
			// 回到首页
			return_page() {
				uni.reLaunch({
					url: '/pages/index/index', // 替换为您的目标页面路径		
				});
			},
			// 获取热门词
			async getHotitems() {
				try {
					this.datas = await hisearch("params");
					this.data1 = this.datas.data.hot_class;
					console.log("data1=>", this.data1);
				} catch (error) {
					console.log("有错误".error);
				}
			},
			
			
			// 携带关键词跳转到搜索详情界面
			gotoSearch() {
				// 从本地存储设置获取现有的名字数组
				let names_datas = uni.getStorageSync('names_data');
				// 去重
				// 去重并删除空字符串
				names_datas = Array.from(new Set(names_datas)).filter(name => name !== '');
				// 如果不存在。就设置一个数组
				// 赋值
				if (!names_datas) {
					names_datas = [];
				}
				console.log("item_name",this.item_name);
				// 在数组最开始的位置插入新的名字
				if (this.item_name != "" && !names_datas.includes(this.item_name)) {
					names_datas.unshift(this.item_name);
					// 将更新后的数组保存回本地存储
					uni.setStorageSync('names_data', names_datas);
					// 输出测试
				}

				// 传值
				// 发送事件
				uni.setStorageSync('search_name', this.item_name);
				// 跳转
				// 最后跳转(获取当前输入框的值)
				uni.navigateTo({
					url: `/pages/toSearch/toSearch?item_name=${encodeURIComponent(this.item_name)}`,
				});
			},
			// 点击增加item（点击增加关键字
			add_item(name) {
				console.log("增加关键字name", name)
				this.item_name = name;
			},
			// 删除历史记录
			del_history() {
				uni.showModal({
					title: '提示',
					content: '你确定要删除历史记录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// 清空数组
							uni.setStorageSync('names_data', []);
							// 重新加载界面
							window.location.reload();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onLoad() {
			this.getHotitems();
			let names_datas = uni.getStorageSync('names_data');
			this.history_data = names_datas;
		},

	}
</script>

<style scoped>
	.blank {
		width: 100%;
		height: 140rpx;
		background-color: beige;
		display: flex;
		position: relative;
	}

	.custom-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		height: 160rpx;
		background-color: #ff5218;
		color: white;
	}

	.search-container {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-icon {
		width: 24px;
		height: 24px;
		margin-top: 70rpx;
	}

	.custom-title {
		font-size: 18px;
		text-align: center;
		position: relative;
		width: 200rpx;
		height: 100rpx;
		display: flex;
		margin: 0 auto;
		margin-left: 200rpx;
		margin-top: 120rpx;
		font-weight: bold;
	}

	.search_ {
		width: 100%;
		height: 70rpx;
		background-color: transparent;
	}

	.search_ input {
		background-color: #ececec;
		display: inline-block;
		height: 100%;
		width: 75%;
		padding-left: 20rpx;
		border-radius: 40rpx;
		margin: 0;
	}

	.toSearch {
		display: inline-block;
		background-color: #d5d5d5;
		border-radius: 0rpx;
		font-size: 16px;
		border: 0;
		margin: 0;
		width: 22%;
		height: 100%;
	}

	/* 历史数据 */
	.search_history {
		width: 100%;
		height: 40rpx;
		margin-top: 24rpx;
		color: #9d9d9d;
		text-align: center;
	}


	.history_line {
		display: flex;
	}

	.search_history text {
		font-size: 14px;
		line-height: 40rpx;
		width: 140rpx;
		color: black;
		padding-left: 2rpx;
	}

	.del_history {
		width: 46rpx;
		margin: 0 auto;
		background-color: transparent;
		border: 0;
		outline: 0;
		transform: translateX(240rpx);
		border-radius: 0;
		background-image: url(../../static/icon_del.png);
		background-size: contain;
		background-position-x: 8rpx;
		object-fit: fill;
		background-repeat: no-repeat;
	}

	.history {
		width: 100%;
		max-height: 300rpx;
		overflow: scroll;
	}

	/* 当前热门 */
	.hot_lines text {
		display: block;
		font-size: 14px;
		margin-top: 12rpx;
		margin-left: 12rpx;
	}

	.hot_items {
		width: 100%;
		height: 700rpx;
		overflow: scroll;
	}

	.item_1,
	.item_2 {
		width: auto;
		height: 50rpx;
		font-size: 14px;
		background-color: #e7e7e7;
		display: inline-block;
		margin: 10rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		border: 1rpx ridge #dfdfdf;
		padding: 0 22rpx;
	}
</style>